<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08.列表渲染</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签的类型为text/babel-->
    <script type="text/babel">
        //6、创建根元素标签对象
        const root = ReactDOM.createRoot(document.querySelector('#root'));

        //想要结构循环出来，肯定是数组
        /* let arr = [1, 2, 3, 4, 5, 6];
        //7、创建虚拟DOM元素对象
        const vDOM = <div>
            <p>{arr}</p>
        </div>
        //8、渲染
        root.render(vDOM); */

        //虽然数组中可以直接显示，但是将来用的一定是虚拟DOM结构
        /* let arr = [
            <span key={0}>1</span>,
            <span key={1}>2</span>,
            <span key={2}>3</span>
        ];
        const vDOM = <div>
            <p>{arr}</p>
        </div>
        root.render(vDOM); */

        //虽然前面可以实现，但是数组中到底有多少个虚拟DOM元素对象，在开发之前数量是不确定的，应该根据接口中数据的数量来决定
        /* let arr = [1, 2, 3, 4, 5, 6]
        for (let i = 0; i < arr.length; i++) { } */

        //来自于接口axios请求回来的结果
        let arr = [1, 2, 3, 4, 5, 6]
        //需求:让数组中每一个元素+1
        // let newArr = arr.map((item, index) => {
        //     return item + 1;
        // });
        // console.log(newArr);
        //循环：for、for in、while、do while、for of、forEach、map

        let span = React.createElement('span', {}, 1);
        console.log(span)


        const vDOM = <div>
            <p>
                {
                    arr.map((item, index) => {
                        return <span key={index}>{item}</span>
                    })
                }
            </p>
        </div>
        root.render(vDOM);
        /*
          [
            {$$typeof: Symbol(react.element), type: 'span', key: '0', ref: null, props: {…}, …},
            {$$typeof: Symbol(react.element), type: 'span', key: '1', ref: null, props: {…}, …},
            ....
          ]
        
        */
    </script>
</body>

</html>